<!-- 别的用户的个人主页 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">{{ userName }}</div>
        <van-icon
          name="ellipsis"
          class="share_more"
          @click="shareShow = true"
        />
      </div>
    </van-sticky>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="shareShow"
      title="立即分享给好友"
      :options="shareOptions"
      @select="goShare"
    />

    <!-- 头像，背景，信息 -->
    <div class="avatar_bg_info" id="user_bg">
      <van-image
        id="avatar_image"
        round
        width="5rem"
        height="5rem"
        fit="fill"
        :src="userAvatar"
        @click="enlargeAvatar"
      />
      <div class="user_name_div">
        {{ userNickName }}
        <van-icon
          @click="clickEditIcon"
          v-if="isCurrentLoginUser"
          size="28px"
          class="edit_icon"
          name="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/tubiao/editor.png"
        />
      </div>
      <div class="day_diary_blog_count">
        <span>{{ birthCount }}天&nbsp;</span>
        <span>{{ diaryCount }}篇日记&nbsp;</span>
        <span>{{ blogCount }}篇博客&nbsp;</span>
      </div>
      <div class="user_tags">
        <div v-for="(item, index) in userTags" :key="index">
          {{ item }}&emsp;
        </div>
      </div>
    </div>

    <!-- 关注，被关注，日记，博客-->
    <div class="concern_main">
      <div class="concern_center" @click="toUserConcernPage(1)">
        <div class="concern_size">{{ userConcern }}</div>
        <div class="concern_font_color">关注</div>
      </div>
      <div class="concern_center" @click="toUserConcernPage(2)">
        <div class="concern_size">{{ userConcerned }}</div>
        <div class="concern_font_color">被关注</div>
      </div>
      <div class="concern_center" @click="toDiaryListPage">
        <div class="concern_size">{{ diaryCount }}</div>
        <div class="concern_font_color">日记</div>
      </div>
      <div class="concern_center" @click="toBlogListPage">
        <div class="concern_size">{{ blogCount }}</div>
        <div class="concern_font_color">博客</div>
      </div>
    </div>

    <!-- 该用户发布的所有日记或博客或者其他瞬间 -->
    <div class="all_shunjian">
      <div
        class="per_shunjian"
        v-for="(item, index) in momentList"
        :key="index"
      >
        <div class="time_style">{{ item.createTime }}</div>
        <div class="image_list">
          <div
            class="per_image"
            v-for="(itemImage, indexImage) in item.imageList"
            :key="indexImage"
          >
            <van-image
              width="5.5rem"
              height="5.5rem"
              radius="5px"
              fit="fill"
              :src="itemImage"
              @click="clickPicEnlarge(item.imageList, indexImage)"
            />
          </div>
        </div>
        <div class="content_style">
          <!-- 这个世界人潮拥挤，请给自己的生活多点信心，照顾好自己，你要逼自己优秀，优于过去的自己。
          愿你成为自己喜欢的样子，不抱怨，不将就，有野心，有光芒。
          其实让人焦虑的，不是忙也不是累，而是没有什么特别感兴趣的东西，也没有什么特别想爱的人，明知道自己该努力了，却又不知道该往哪里用力。 -->
          {{ item.content }}
        </div>
      </div>
    </div>

    <!-- 底部：关注和聊天 -->
    <van-tabbar class="tabbar_btn" v-if="!isCurrentLoginUser">
      <van-button
        round
        type="primary"
        color="#40B89C"
        size="small"
        @click="concernOrcancelConcern"
      >
        &emsp;{{ guanzhuOrWeiGuanZhu }}&emsp;
      </van-button>
      <van-button
        round
        type="primary"
        color="#40B89C"
        size="small"
        @click="toChatWithTa"
      >
        &emsp;私聊&emsp;
      </van-button>
    </van-tabbar>

    <!-- 点击编辑图标显示的弹出层 -->
    <van-popup
      v-model:show="editNameShow"
      position="bottom"
      round
      :style="{ height: '15%', padding: '10px' }"
    >
      <van-field
        v-model="nickNameValue"
        clearable
        label="昵称"
        left-icon="user-o"
        placeholder="输入用户昵称"
        :error-message="errorMessage"
      />
      <div>
        <van-button type="primary" block @click="editNameFunc">确定</van-button>
      </div>
    </van-popup>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- 点击头像显示的遮罩层 -->
    <van-overlay :show="avatarEnlargeShow" @click="avatarEnlargeShow = false">
      <div class="wrapper">
        <div id="block"></div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import {
  getUserInfoByAid,
  updateUserNickName,
  concernUser,
  cancelConcernUser,
} from '../api/user.js'
export default {
  data() {
    return {
      userAid: this.$route.query.userAid, // 这个用户的aid（其他页面传来的）
      shareShow: false, // 分享面板的显示与否
      isCurrentLoginUser: false, // 这个用户是否是当前登陆的用户
      userNickName: '范占国', // 用户昵称
      userAvatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', // 用户头像
      userName: 'fantasy', // 用户名
      birthCount: 0, // 出生多少天了
      diaryCount: 0, // 有多少篇日记
      blogCount: 0, // 多少篇博客
      userConcern: 0, // 该用户关注了多少用户
      userConcerned: 0, // 该用户被多少用户关注
      momentList: [], // 该用户的所有瞬间（包含日记，博客和其他）
      editNameShow: false, // 控制编辑nickName弹出层的显示
      nickNameValue: '', // 编辑弹出框里面的输入框的值
      errorMessage: '', // 错误提示
      guanzhuOrWeiGuanZhu: '关注', // 当前登陆的用户是否关注了这个用户
      avatarEnlargeShow: false, // 控制点击头像遮罩层的显示与否
      userBackImage:
        'https://img2.baidu.com/it/u=3305896652,243597795&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // 用户背景图片
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ], // 分享面板里面的内容
      imageList: [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fimages01%2F20200718%2F915efdcc641e49eab78cc8c6509a7a2a.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658889930&t=cdfd21c6c9c85bbb89793e6e13769329',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01876b5de12a66a8012159728a3b6e.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658889930&t=ccd014434a1f867efa256d45e682021b',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0149c85b4ca430a8012036be2e7248.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658889930&t=05840dbea51be95c42c6442b57ce37e5',
      ], // 图片list
      userTags: ['王者荣耀', '轻音乐', '抖音', 'emo怪', '小王子', '程序猿'], // 用户标签
    }
  },

  created() {
    // 获取这个用户所有信息
    this.getUserInfoByUserAid()
  },

  mounted() {
    // 设置背景图
    // this.setUserBg()
  },

  methods: {
    // 获取这个用户所有信息
    getUserInfoByUserAid() {
      getUserInfoByAid(this.userAid).then((res) => {
        console.log(res)
        this.userNickName = res.data.data.userNickName
        this.userName = res.data.data.userName
        this.userAvatar = res.data.data.userAvatar
        this.birthCount = res.data.data.birthCount
        this.diaryCount = res.data.data.diaryCount
        this.blogCount = res.data.data.blogCount
        this.userTags = res.data.data.userTags
        this.userConcern = res.data.data.userConcern
        this.userConcerned = res.data.data.userConcerned
        this.momentList = res.data.data.momentList
        this.isCurrentLoginUser = res.data.data.isCurrentLoginUser
        this.guanzhuOrWeiGuanZhu = res.data.data.guanzhuOrWeiGuanZhu
        this.userBackImage = res.data.data.userBg
        this.setUserBg();
      })
    },

    // 点击分享
    goShare(options, index) {
      this.$toast({
        message: options.name,
        icon: options.icon,
        duration: 1000,
      })
    },

    // 点击关注或者点击取消关注
    concernOrcancelConcern() {
      const _this = this
      if (_this.guanzhuOrWeiGuanZhu === '已关注') {
        // 已经关注了现在要取消关注
        this.$dialog
          .confirm({
            message: '确定不再关注ta了吗？',
          })
          .then(() => {
            // 取消关注这个用户
            cancelConcernUser(_this.userAid).then(() => {
              _this.getUserInfoByUserAid()
            })
          })
          .catch(() => {
            // 取消不做任何事情
          })
      } else {
        // 点击关注，关注这个用户
        concernUser(_this.userAid).then(() => {
          this.$toast({
            type: 'success',
            message: '关注成功！',
            duration: 800,
          })
          _this.getUserInfoByUserAid()
        })
      }
    },

    // 点击私聊
    toChatWithTa() {
      this.$router.push({
        path: '/userChat',
        query: {
          userAid: this.userAid,
        },
      })
    },

    // 设置背景图
    setUserBg() {
      setTimeout(() => {
        // 给用户背景墙初始化背景
        let userBg = document.getElementById('user_bg')
        userBg.style.backgroundImage = `url("${this.userBackImage}")` //设置背景图的的地址
        userBg.style.backgroundRepeat = 'no-repeat' //设置背景不平铺
        userBg.style.backgroundSize = 'cover' //设置背景图像的尺寸
      }, 100)
    },

    // 点击图片放大
    clickPicEnlarge(imageList, index) {
      ImagePreview({
        images: imageList,
        startPosition: index,
      })
    },

    // 点击头像放大
    enlargeAvatar() {
      this.avatarEnlargeShow = true
      setTimeout(() => {
        let block = document.getElementById('block')
        // console.log(block)
        block.style.backgroundImage = `url("${this.userAvatar}")`
        block.style.backgroundRepeat = 'no-repeat'
        block.style.backgroundSize = 'cover'
      }, 100)
    },

    // 点击编辑图标修改自己的用户名
    clickEditIcon() {
      this.editNameShow = true
      this.nickNameValue = this.userNickName
    },

    // 点击确认修改用户的昵称
    editNameFunc() {
      const params = {
        userAid: this.userAid,
        nickName: this.nickNameValue,
      }
      if (this.nickNameValue === '') {
        this.errorMessage = '请输入昵称'
      } else {
        updateUserNickName(params).then((res) => {
          if (res.data.code === 10000) {
            this.$toast({
              type: 'success',
              message: res.data.message,
              duration: 900,
            })
          } else {
            this.$toast({
              type: 'fail',
              message: res.data.message,
              duration: 900,
            })
          }
          this.getUserInfoByUserAid()
        })
        this.editNameShow = false
      }
    },

    // 去用户关注的页面
    toUserConcernPage(param) {
      this.$router.push({
        path: '/userConcern',
        query: {
          state: param, // 用户关注的人状态为1，该用户被哪些人关注，状态为2
          userAid: this.userAid,
        },
      })
    },

    // 去该用户的日记列表页面
    toDiaryListPage() {
      this.$router.push({
        path: '/otherUserDiaryList',
        query: {
          userAid: this.userAid,
        },
      })
    },

    // 去博客列表页面
    toBlogListPage() {
      this.$router.push({
        path: '/otherUserBlogList',
        query: {
          userAid: this.userAid,
        },
      })
    },
  },
}
</script>

<style scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: rgb(86, 82, 82);
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.return_div {
  width: 30px;
  padding-left: 20px;
}
.top_title {
  width: 40%;
  text-align: center;
  margin-left: 3.5em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
  font-size: 20px;
}
.share_more {
  font-size: 30px;
  margin-right: 10px;
  margin-top: -3px;
}
.avatar_bg_info {
  width: 100%;
  height: 16em;
  text-align: center;
}
#avatar_image {
  margin-top: 2em;
  margin-left: auto;
  box-shadow: -20px 0 20px 5px rgba(213, 255, 145, 0.5),
    0px -20px 20px 5px rgba(145, 255, 191, 0.5),
    20px 0 20px 5px rgba(82, 255, 220, 0.5),
    0 20px 20px 5px rgba(239, 255, 91, 0.5);
}
.user_name_div {
  color: aliceblue;
  font-size: 18px;
}
.edit_icon {
  position: relative;
  top: 8px;
  /* color: aliceblue; */
}
.day_diary_blog_count {
  color: rgb(194, 207, 219);
}
.user_tags {
  width: 80%;
  /* background-color: antiquewhite; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  color: rgb(224, 228, 232);
  margin-top: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.concern_main {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.concern_center {
  text-align: center;
}
.concern_size {
  font-size: 23px;
  font-weight: 600;
}
.concern_font_color {
  color: #909399;
  font-size: small;
}
.all_shunjian {
  width: 90%;
  margin: auto;
  margin-top: 20px;
}
.time_style {
  color: #909399;
  margin-bottom: 10px;
}
.content_style {
  color: #303133;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.image_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.per_shunjian {
  margin-bottom: 20px;
}
.tabbar_btn {
  text-align: center;
  /* padding-left: 8em; */
  padding-top: 15px;
  /* padding-bottom: -10px; */
  display: flex;
  justify-content: space-around;
}
.per_image {
  margin-bottom: 10px;
  margin-right: 10px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#block {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
